<template>
	<div class="task_process">
		<div class="task_process_head">
			<el-radio-group class="gray_radio_group" v-model="taskType" size="small">
				<el-radio-button label="1">转码任务</el-radio-button>
				<el-radio-button label="2">审核任务</el-radio-button>
			</el-radio-group>
			<el-button type="text" icon="el-icon-refresh" @click="handleRefreshData">刷新时间：{{ refreshTime }}</el-button>
		</div>
		<div class="task_process_filter">
			<el-checkbox :disabled="tableData.length === 0" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
				<template v-if="selectedCheckbox.length === 0">全选</template>
				<template v-else>已选 {{ selectedCheckbox.length }} 项</template>
			</el-checkbox>
			<div class="button">
				<template v-if="selectedCheckbox.length > 0">
					<el-button type="primary" size="small" icon="el-icon-edit" round plain @click="handleOpenTaskEdit">编辑</el-button>
				</template>
			</div>
			<div class="filter">
				统计区间
				<el-select size="small" v-model="taskTimeRange" clearable placeholder="时间区间">
					<el-option label="最近一周" value="1"></el-option>
					<el-option label="最近一月" value="2"></el-option>
					<el-option label="最近一年" value="3"></el-option>
				</el-select>
			</div>
		</div>
		<div class="task_process_table" v-loading="loading">
			<el-table ref="table" :data="tableData" @select="handleTableSelect">
				<el-table-column type="selection" width="42"></el-table-column>
				<el-table-column label="任务名称" min-width="180">
					<template slot-scope="{ row }">
						<span class="title" @click="handleLookDetail(row)">{{ row.name }}</span>
					</template>
				</el-table-column>
				<el-table-column label="任务分类" min-width="120">
					<template slot-scope="{ row }">
						{{ row.type | taskTypeFileter }}
					</template>
				</el-table-column>
				<el-table-column prop="wait" label="待执行" min-width="80"></el-table-column>
				<el-table-column prop="going" label="执行中" min-width="80"></el-table-column>
				<el-table-column label="完成/失败" min-width="120">
					<template slot-scope="{ row }">
						{{ row.success }}/<font color="red">{{ row.failure }}</font>
					</template>
				</el-table-column>
				<el-table-column label="完成度" min-width="120">
					<template slot-scope="{ row }">
						<el-progress :percentage="getFinishRate(row)"></el-progress>
					</template>
				</el-table-column>
				<el-table-column label="启用状态" min-width="80">
					<template slot-scope="{ row }">
						<el-tag size="small" v-if="row.status === '1'" type="success">运行中</el-tag>
						<el-tag size="small" v-if="row.status === '2'" type="error">停止</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="执行时间" min-width="80">
					<template slot-scope="{ row }">
						{{ row.timeType | timeTypeFilter }}
					</template>
				</el-table-column>
				<el-table-column prop="processNum" label="启用进程" width="80" align="center"></el-table-column>
			</el-table>
			<Pagination v-if="dataCount > 0" :total="dataCount" @change="getTaskListData" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />
		</div>
		<task-edit v-model="editDialog" :data="selectedCheckbox"></task-edit>
		<task-detail v-model="detailDrawer" :task-id="taskId"></task-detail>
	</div>
</template>

<script>
import moment from 'moment';
import taskEdit from './dialog';
import taskDetail from './drawer';
export default {
	components: { taskEdit, taskDetail },
	data() {
		return {
			loading: false,
			taskType: '1',
			refreshTime: '',
			listQuery: {
				page: 1,
				limit: 10
			},
			dataCount: 2,
			tableData: [
				{
					id: 1,
					name: 'mov，flv转换mp4',
					type: '1',
					wait: '12',
					going: '57',
					success: '87642',
					failure: '323',
					status: '1',
					timeType: '1',
					processNum: '6'
				},
				{
					id: 2,
					name: 'mov，flv转换mp4',
					type: '1',
					wait: '12',
					going: '57',
					success: '87642',
					failure: '323',
					status: '1',
					timeType: '1',
					processNum: '6'
				}
			],
			taskTimeRange: '',
			checkAll: false,
			isIndeterminate: false,
			selectedCheckbox: [],

			//任务修改
			editDialog: false,

			//任务详情
			detailDrawer: false,
			taskId: ''
		};
	},
	filters: {
		taskTypeFileter(data) {
			return '音视频转码';
		},
		timeTypeFilter(data) {
			return '全天执行';
		},
		finishRateFilter(data) {}
	},
	watch: {
		taskType(val) {
			this.getTaskListData();
		},
		taskTimeRange(val) {
			this.getTaskListData();
		}
	},
	mounted() {
		this.getTaskListData();
	},
	methods: {
		async getTaskListData() {
			this.loading = true;
			setTimeout(() => {
				this.loading = false;
				this.refreshTime = moment().format('YYYY-MM-DD HH:mm:ss');
			}, 1000);
		},
		handleRefreshData() {
			this.getTaskListData();
		},

		//全选
		handleCheckAllChange(flag) {
			this.isIndeterminate = false;
			this.selectedCheckbox = !flag ? [] : [...this.tableData];
			this.$nextTick(() => {
				if (!flag) {
					this.$refs['table'].clearSelection();
				} else {
					this.tableData.forEach((item) => {
						this.$refs['table'].toggleRowSelection(item, true);
					});
				}
			});
		},

		//表格勾选多选框
		handleTableSelect(selection) {
			console.log(selection);
			this.selectedCheckbox = [...selection];
			this.checkAll = selection.length === this.tableData.length;
			this.isIndeterminate = selection.length > 0 && selection.length < this.tableData.length ? true : false;
		},

		//获取完成率
		getFinishRate(data) {
			let finish = Number(data.success) + Number(data.failure);
			let total = Number(data.wait) + Number(data.going) + finish;
			return parseInt((finish / total) * 10000) / 100;
		},

		//打开任务修改
		handleOpenTaskEdit() {
			this.editDialog = true;
		},

		//查看任务详情
		handleLookDetail(data) {
			this.taskId = data.id;
			this.detailDrawer = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.task_process {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0 15px;
}
.task_process_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 0;
	border-bottom: solid 1px #f5f7fa;
	.el-button {
		padding: 8px 0;
		color: #303133;
	}
}
.task_process_filter {
	display: flex;
	align-items: center;
	padding: 10px 0 0;
	.el-checkbox ::v-deep {
		margin: 0;
		.el-checkbox__label {
			color: #303133;
		}
	}
	.button {
		flex: 1;
		margin-left: 20px;
		overflow: hidden;
		.el-button {
			padding: 5px 9px;
		}
	}
	.filter {
		display: flex;
		align-items: center;
		.el-select {
			width: 100px;
			margin-left: 10px;
		}
	}
}
.task_process_table ::v-deep {
	flex: 1;
	overflow: hidden;
	.el-checkbox {
		margin-left: 0;
	}
	.has-gutter .el-checkbox {
		display: none;
	}
	.el-progress {
		display: flex;
		align-items: center;
	}
	.el-progress__text {
		white-space: nowrap;
		flex-shrink: 0;
	}
	span.title {
		cursor: pointer;
	}
}
</style>
